<template>
  <div class="content">
      <div class="allmap" ref="allmap"></div>
      <div class="tab">
         <div 
         class="arrow"
         @click="handleArrowClick()"
         >V</div>
         <navbar v-model="selected">  <!-- 默认显示第一个 -->
            <tab-item id="1">酒店</tab-item>
            <tab-item id="2">景点</tab-item>
          </navbar>

          <tab-container v-model="selected">
            <tab-container-item id="1">
              <cell 
              v-for="item of addressList[0]" 
              :title="item.title" 
              :key="item.id"
              @click.native="handleCellClick(item.id)"
              /> <!-- 因为现在绑定的事件是在一个组件上，还是外来引入的组件，所以需要native来修饰 -->
            </tab-container-item>
            <tab-container-item id="2">
              <cell 
              v-for="item of addressList[1]" 
              :title="item.title" 
              :key="item.id"
              @click.native="handleCellClick(item.id)"
              />
            </tab-container-item>
          </tab-container>
      </div>
  </div>
</template>

<script>
import { 
          Navbar, 
          TabItem,
          TabContainer,
          TabContainerItem,
          Cell
  } from 'mint-ui';
import markerImg from '@/assets/img/marker.png'
export default {
  name: 'mapContent',
  // props:{
  //   addressList:Array
  // },
  data () {
    return {
        clickFlag:'0',
        flag:'1',
        selected:'1',
        addressList:[
          [
            {
              id:'0',
              laber:'北京市朝阳区三里屯路19号',
              title:'三里屯'
            },
            {
              id:'1',
              laber:'北京市海淀区清华西路28号',
              title:'圆明园'
            },
          ],
           [
            {
              id:'0',
              laber:'陕西省西安市雁塔区大雁塔街道广场东路3号',
              title:'大雁塔'
            },
            {
              id:'1',
              laber:'陕西省西安市雁塔区长延堡街道长安南路98号',
              title:'myhome'
            },
             {
              id:'2',
              laber:'西安市新城区自强东路585号大明宫国家遗址公园',
              title:'大明宫国家遗址公园'
            },
          ]
        ]
    }
  },
  components:{
          Navbar, 
          TabItem,
          TabContainer,
          TabContainerItem,
          Cell
  
  },
  methods:{
    addMasker(m,n){
     // console.log(m,n)
      let map = new BMap.Map(this.$refs.allmap) //新建一个地图实例到div中去
      let myGeo = new BMap.Geocoder()  //逆向解析出定位得经纬度
      for (let i =0;i<this.addressList.length;i++){ //循环addressList数组
        for(let j=0;j<this.addressList[i].length;j++){ //循环第二层数组
          let laber = this.addressList[i][j].laber //取出第m个数组里面的第n个数组laber的值
          let title = this.addressList[i][j].title
          //console.log(title)
          myGeo.getPoint(this.addressList[i][j].laber,// 逆解析第二层数组里面得laber
          function(point){ //point就是解析后的经纬度
              //console.log(point) //打印出经纬度
              if(point){  //将point 传进来判断是否有值
                  if(i===m&&j===n){// 给00点添加一个特定的图片
                    map.centerAndZoom(point,15) //缩放等级
                    let myIcon = new BMap.Icon
                    (markerImg,new BMap.Size(50,50),{ //传入特定的图片，并且设置样式
                      imageOffset:new BMap.Size(14,20) //周边的距离
                    })
                    let marker = new BMap.Marker(point,{icon:myIcon})//添加一个特定的样式
                    map.addOverlay(marker) //将样式添加到界面上
                     //添加信息窗口
                    let opts = {width:100,height:30,title:'hello，这里是：'}//定位提示信息的标题和样式
                    let infoWindow = new BMap.InfoWindow(laber,opts) //提示信息的内容和样式
                    map.openInfoWindow(infoWindow,map.getCenter())  //打开提示窗口
                  }else{
                    map.centerAndZoom(point,14) //缩放比例
                    let marker = new BMap.Marker(point) //添加一个随意的样式
                    map.addOverlay(marker)
                  }
              }else{
                console.log('对不起，找不到')
              }
          })
        }
      }
    },
    // changeMasker(id){
    //     let page = parseInt(this.flag)-1  //解析字符串并返回数字
    //     let index = parseInt(id)-1        //解析字符串并返回数字
    //     this.addMasker(page,index)        //将坐标传入这个函数中去
    // },
    // handleCellClick(id){
    //   //console.log(id)
    //   if(this.flag==='1'){    //根据selected函数改变flag的值，判断点击的是左边还是右边，
    //     this.changeMasker(id)
    //   }else{
    //     this.changeMasker(id)
    //   }
    // },
    handleCellClick(id){
        let page = parseInt(this.flag)-1  //解析字符串并返回数字
        let index = parseInt(id)        //解析字符串并返回数字
        this.addMasker(page,index)        //将坐标传入这个函数中去
    },
    // handlerigthClick(id){
    //     let page = parseInt(this.flag)-1  //解析字符串并返回数字
    //     let index = parseInt(id)        //解析字符串并返回数字
    //     this.addMasker(page,index)        //将坐标传入这个函数中去
    // },
    handleArrowClick(){    //缩放底部大小,
      if(this.clickFlag ==='0'){
          this.$refs.allmap.style.height='20%'
          this.clickFlag='1'
      }else{
          this.$refs.allmap.style.height='60%'
          this.clickFlag='0'
      }
    }
  },
  watch:{
    //判断点击的到底是左边还是右边
    selected(val){ //是mint-ui的api，通过监控selected可以返回点击区域的id值
      //console.log(val)
      //console.log(fixed)
      if(val ==='1'){ //如果val是1 就是左边
        this.flag= '1'
      }else{
        this.flag='2'
      }
    }
  },
  mounted(){
    this.addMasker(0,0)  //默认显示00位置
  }
}
</script>

<style lang="stylus" scoped>
     .content
      position:absolute
      top:0
      left:0
      right:0
      bottom:0
      background:#fff
      z-index:100
      .allmap
        position:relative
        top:0
        left:0
        right:0
        bottom:.6rem
        z-index:11111
        height:60%
      .tab
        color:#000
        .arrow
          text-align:center
</style>
